/*
 * @Description: 设计流程弹窗
 * @Author: Rfan
 * @Date: 2022-12-11 17:00:28
 * @LastEditTime: 2022-12-11 17:04:17
 */

import { useEffect } from 'react';
import { Modal } from 'antd';
import ReactBpmn from '@/components/Bpmn';
import type { ICommonDialog } from '@/interfaces/global';
import { useFlowMgtContext } from '@/view/sysMaintenance/FlowMgt/contexts/FlowMgtContext';

interface IAddFlowDialogProps extends ICommonDialog {
  data: any;
}

const DesignFlowDialog = (props: IAddFlowDialogProps) => {
  const { visible, data, onClose } = props;
  const { saveFlowDiagramFunc } = useFlowMgtContext();

  useEffect(() => {
    if (visible) {
      //
    }
  }, [visible]);

  const onCancel = () => {
    onClose();
  };

  const saveFlowDesign = (xml: string) => {
    const params = { id: data.id, content: xml };
    saveFlowDiagramFunc(params).then(() => {
      onCancel();
    });
  };

  return (
    <Modal
      destroyOnClose
      title="设计流程"
      visible={visible}
      wrapClassName="jp-modal-fullscreen"
      onCancel={onCancel}
      footer={null}
    >
      <ReactBpmn
        readOnly={false}
        id={data.id}
        onSave={(xml: string) => {
          saveFlowDesign(xml);
        }}
      />
    </Modal>
  );
};

export default DesignFlowDialog;
